<template>
	<div class="alarm-region">
		<!-- <div v-if="props.loading" class="loading-page">
			<a-spin size="large" tip="加载中..." />
		</div> -->
		<div class="region">
			<div id="regionCharts" :style="{ width: '549px', height: '166px' }"></div>
		</div>
	</div>
</template>

<script setup lang="ts" name="AlarmRegion">
import * as echarts from 'echarts';

// 具体统计类型
type _tsRegionData = {
	name: string;
	value: string;
	rate: number;
};
type _tsProps = {
	loading: boolean;
	regionData: Array<_tsRegionData>;
};

const props = withDefaults(defineProps<_tsProps>(), {
	loading: false,
	regionData: () => []
});
// 伞图
const myRegionCharts: any = ref('');

const regionCharts = (): void => {
	const option = {
		xAxis: {
			type: 'category',
			data: props.regionData.map((d: Record<string, any>) => d.areaName),
			axisTick: {
				show: false
			},
			axisLabel: {
				// 默认x轴字体大小
				fontSize: 12,
				// margin:文字到x轴的距离
				margin: 6,
				interval: 0,
				height: 17,
				color: 'rgba(255, 255, 255, 0.6)',
				formatter: function (value: string) {
					let res = value;
					// 长度超过4个的以省略号显示
					if (res.length > 4) {
						res = res.substring(0, 4) + '...';
					}
					return res;
				}
			},
			axisLine: {
				show: false
			}
		},
		yAxis: {
			type: 'value',
			name: '单位（次）',
			splitLine: {
				show: false
			}
		},
		grid: {
			top: 40,
			left: 70,
			right: 30,
			bottom: 20
		},
		series: [
			{
				name: '数量',
				barMinHeight: 10,
				type: 'pictorialBar',
				barCategoryGap: '10%',
				symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
				itemStyle: {
					// barBorderRadius: 5,
					// 渐变色
					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
						{
							offset: 0.5,
							color: '#4080FF'
						},
						{
							offset: 1,
							color: '#22286000'
						}
					])
				},

				label: {
					show: true,
					position: 'top',
					color: '#fff',
					fontSize: 12
				},
				data: props.regionData.map((d: Record<string, any>) => d.alarmCount),
				z: 10
			}
		]
	};
	nextTick(() => option && myRegionCharts.value.setOption(option));
};
const watchStop = watch(
	() => props.regionData,
	() => {
		regionCharts();
	},
	{
		immediate: true,
		deep: true
	}
);
onMounted(() => {
	const regionDom = document.getElementById('regionCharts');
	myRegionCharts.value = echarts.init(regionDom); // 初始化echarts实例
});
onUnmounted(() => {
	watchStop();
});
</script>

<style lang="less" scoped>
.alarm-region {
	.loading-page {
		position: absolute;
		top: 0;
		z-index: 9999;
		display: flex;
		width: 100%;
		height: 100%;
		border-radius: 6px;
		background-color: rgba(23, 40, 69, 0.96);
		transition: transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
		align-items: center;
		justify-content: center;
		backdrop-filter: saturate(244%) blur(5px);

		.ant-spin {
			color: rgba(24, 104, 233, 0.65);
			transform: scale(0.8);
		}
	}

	#regionChart {
		margin: 12px auto 0;
	}
}
</style>
